<template>
  <view class="doctor-detail">
    <!-- 医生信息卡片 -->
    <view class="doctor-card">
      <view class="basic-info">
        <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
        <view class="info">
          <view class="name-title">
            <text class="name">{{ doctor.name }}</text>
            <text class="title">{{ doctor.title }}</text>
          </view>
          <text class="hospital">{{ doctor.hospital }}</text>
          <view class="tags">
            <text v-for="(tag, index) in doctor.tags" :key="index">{{ tag }}</text>
          </view>
        </view>
      </view>
      <view class="statistics">
        <view class="stat-item">
          <text class="value">{{ doctor.experience }}年</text>
          <text class="label">从医经验</text>
        </view>
        <view class="stat-item">
          <text class="value">{{ doctor.rating }}</text>
          <text class="label">综合评分</text>
        </view>
        <view class="stat-item">
          <text class="value">{{ doctor.patients }}</text>
          <text class="label">接诊人数</text>
        </view>
      </view>
    </view>
    
    <!-- 擅长领域 -->
    <view class="section-card">
      <view class="section-title">擅长领域</view>
      <text class="specialty">{{ doctor.specialty }}</text>
    </view>
    
    <!-- 医生简介 -->
    <view class="section-card">
      <view class="section-title">医生简介</view>
      <text class="introduction">{{ doctor.introduction }}</text>
    </view>
    
    <!-- 出诊时间 -->
    <view class="section-card">
      <view class="section-title">出诊时间</view>
      <scroll-view 
        scroll-x 
        class="schedule-list"
        :show-scrollbar="false"
      >
        <view 
          class="schedule-item"
          v-for="(item, index) in doctor.schedules"
          :key="index"
          :class="{ active: selectedSchedule === index }"
          @tap="selectSchedule(index)"
        >
          <text class="date">{{ item.date }}</text>
          <text class="day">{{ item.day }}</text>
          <text class="period">{{ item.period }}</text>
          <text class="price">¥{{ item.price }}</text>
          <text class="remain">剩余{{ item.remain }}号</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 患者评价 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">患者评价</text>
        <text class="more">查看全部</text>
      </view>
      <view class="review-list">
        <view 
          class="review-item"
          v-for="(item, index) in doctor.reviews"
          :key="index"
        >
          <view class="user-info">
            <image :src="item.avatar" mode="aspectFill" class="avatar" />
            <view class="info">
              <text class="name">{{ item.name }}</text>
              <text class="time">{{ item.time }}</text>
            </view>
            <view class="rating">
              <text class="iconfont icon-star" v-for="n in 5" :key="n"></text>
            </view>
          </view>
          <text class="content">{{ item.content }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="action-btn outline" @tap="showConsult">在线咨询</button>
      <button class="action-btn primary" @tap="makeAppointment">立即预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 医生信息
const doctor = ref({
  id: 1,
  name: '张医生',
  title: '主任医师',
  avatar: '/static/doctor/avatar1.jpg',
  hospital: '澳门镜湖医院',
  department: '心内科',
  tags: ['专家门诊', '视频问诊'],
  experience: 20,
  rating: 4.9,
  patients: 12580,
  specialty: '擅长冠心病、高血压、心律失常等心血管疾病的诊治，在心血管疾病的预防、诊断和治疗方面有丰富经验。',
  introduction: '张医生从事心血管专业20余年，曾在北京协和医院进修学习。现任澳门镜湖医院心内科主任医师，澳门心血管病学会会员。在心血管疾病的诊治方面积累了丰富的临床经验，尤其在冠心病、高血压、心律失常等方面有较深造诣。',
  schedules: [
    {
      date: '03-25',
      day: '今天',
      period: '上午',
      price: 300,
      remain: 2
    },
    {
      date: '03-26',
      day: '明天',
      period: '下午',
      price: 300,
      remain: 5
    },
    {
      date: '03-27',
      day: '周三',
      period: '上午',
      price: 300,
      remain: 8
    }
  ],
  reviews: [
    {
      id: 1,
      name: '张**',
      avatar: '/static/avatar/user1.jpg',
      time: '2024-03-20',
      rating: 5,
      content: '张医生很专业，态度也很好，详细解答了我的问题，让我对病情有了更清晰的认识。'
    },
    {
      id: 2,
      name: '李**',
      avatar: '/static/avatar/user2.jpg',
      time: '2024-03-19',
      rating: 5,
      content: '医术精湛，服务周到，值得信赖的好医生。'
    }
  ]
})

// 选中的排班
const selectedSchedule = ref(0)

// 选择排班
const selectSchedule = (index) => {
  selectedSchedule.value = index
}

// 在线咨询
const showConsult = () => {
  uni.showModal({
    title: '提示',
    content: '是否开始在线咨询？',
    success: (res) => {
      if (res.confirm) {
        // 这里处理在线咨询逻辑
      }
    }
  })
}

// 立即预约
const makeAppointment = () => {
  const schedule = doctor.value.schedules[selectedSchedule.value]
  uni.navigateTo({
    url: `/pages/appointment/confirm?doctorId=${doctor.value.id}&date=${schedule.date}&period=${schedule.period}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { id, name, hospital } = page.$page?.options || {}
  
  // 这里根据ID加载医生详情
  console.log('加载医生详情:', id, name, hospital)
})
</script>

<style lang="scss">
.doctor-detail {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .doctor-card {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .basic-info {
      display: flex;
      margin-bottom: 30rpx;
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }
      
      .info {
        flex: 1;
        
        .name-title {
          margin-bottom: 12rpx;
          
          .name {
            font-size: 36rpx;
            color: $text-primary;
            font-weight: bold;
            margin-right: 16rpx;
          }
          
          .title {
            font-size: 28rpx;
            color: $text-regular;
          }
        }
        
        .hospital {
          font-size: 28rpx;
          color: $text-regular;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .tags {
          text {
            display: inline-block;
            font-size: 24rpx;
            color: $primary-color;
            background: $primary-light;
            padding: 4rpx 16rpx;
            border-radius: $radius-sm;
            margin-right: 16rpx;
          }
        }
      }
    }
    
    .statistics {
      display: flex;
      border-top: 1rpx solid #eee;
      padding-top: 30rpx;
      
      .stat-item {
        flex: 1;
        text-align: center;
        
        .value {
          font-size: 36rpx;
          color: $primary-color;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .label {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .section-card {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .more {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
    
    .specialty,
    .introduction {
      font-size: 28rpx;
      color: $text-regular;
      line-height: 1.6;
    }
    
    .schedule-list {
      white-space: nowrap;
      
      .schedule-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 200rpx;
        padding: 20rpx;
        margin-right: 20rpx;
        background: $bg-color;
        border-radius: $radius-lg;
        
        .date {
          font-size: 28rpx;
          color: $text-primary;
          margin-bottom: 8rpx;
        }
        
        .day {
          font-size: 24rpx;
          color: $text-secondary;
          margin-bottom: 8rpx;
        }
        
        .period {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
        }
        
        .price {
          font-size: 28rpx;
          color: $warning;
          font-weight: bold;
          margin-bottom: 8rpx;
        }
        
        .remain {
          font-size: 24rpx;
          color: $success;
        }
        
        &.active {
          background: $primary-light;
          
          .date,
          .day,
          .period {
            color: $primary-color;
          }
        }
      }
    }
    
    .review-list {
      .review-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .user-info {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            margin-right: 16rpx;
          }
          
          .info {
            flex: 1;
            
            .name {
              font-size: 28rpx;
              color: $text-primary;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .time {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
          
          .rating {
            .iconfont {
              font-size: 24rpx;
              color: $warning;
              margin-left: 4rpx;
            }
          }
        }
        
        .content {
          font-size: 28rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 